<template>
  <div class="box">
    <van-popover
      placement="left"
      v-model="showPopover"
      trigger="click"
      :actions="actions"
      @select="onSelect"
    >
      <template #reference>
        <van-button type="primary">浅色风格</van-button>
      </template>
    </van-popover>
    <!-- 深色 -->
    <van-popover
      v-model="showPopover"
      theme="dark"
      trigger="click"
      :actions="actions1"
      placement="bottom"
    >
      <template #reference>
        <van-button type="primary">深色风格</van-button>
      </template>
    </van-popover>
    <van-popover
      placement="right"
      v-model="showPopover"
      trigger="click"
      :actions="actions"
    >
      <template #reference>
        <van-button type="primary">展示图标</van-button>
      </template>
    </van-popover>
    <button @click="btn">点我啊宝</button>
    <van-steps :active="active">
      <van-step>买家下单</van-step>
      <van-step>商家接单</van-step>
      <van-step>买家提货</van-step>
      <van-step>交易完成</van-step>
    </van-steps>
    <van-steps :active="active" active-icon="arrow-down" active-color="#38f">
      <van-step>买家下单</van-step>
      <van-step>商家接单</van-step>
      <van-step>买家提货</van-step>
      <van-step>交易完成</van-step>
    </van-steps>
    <van-steps direction="vertical" :active="active">
      <van-step>
        <h3>【城市】物流状态1</h3>
        <p>2016-07-12 12:40</p>
      </van-step>
      <van-step>
        <h3>【城市】物流状态2</h3>
        <p>2016-07-11 10:00</p>
      </van-step>
      <van-step>
        <h3>【城市】物流状态3</h3>
        <p>2016-07-11 10:00</p>
      </van-step>
      <van-step>
        <h3>快件已发货</h3>
        <p>2016-07-10 09:30</p>
      </van-step>
    </van-steps>
  </div>
</template>
<script>
import { Toast } from 'vant';

export default {
  data () {
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: '我真帅', icon: 'add-o' }, { text: '是真的帅', icon: 'music-o', disabled: true }, { text: '帅爆了', icon: 'more-o' }],
      actions1: [{ text: '我真帅', disabled: true }, { text: '是真的帅' }, { text: '帅爆了' }],
      active: 1,
    };
  },
  methods: {
    onSelect (action) {
      Toast(action.text);
    },
    btn () {
      this.active += 1
      if (this.active == 4) {
        this.active = 0
      }
    }
  },
};
</script>
<style lang='less'  scoped>
.box {
  padding: 100px;
}
</style>
